<template>
  <div class="admin-container">
    <!-- 顶部标题栏 -->
    <div class="admin-header">
      <div class="header-inner">
        <div class="header-left">
          <img class="logo-img" :src="logoUrl" alt="系统Logo">
          <div class="system-name">考研真题训练系统 管理后台</div>
        </div>
        <div class="header-right">
          <div class="header-controls">
            <el-tooltip content="全屏" placement="bottom">
              <div class="control-icon" @click="toggleFullscreen">
                <el-icon>
                  <FullScreen />
                </el-icon>
              </div>
            </el-tooltip>
            <el-tooltip :content="darkMode ? '切换亮色模式' : '切换暗色模式'" placement="bottom">
              <div class="control-icon" @click="toggleDarkMode">
                <el-icon v-if="darkMode">
                  <Sunny />
                </el-icon>
                <el-icon v-else>
                  <Moon />
                </el-icon>
              </div>
            </el-tooltip>
            <el-dropdown trigger="click">
              <div class="user-info">
                <el-avatar :size="36" :src="avatarUrl" />
                <div class="user-details">
                  <div class="admin-name">管理员</div>
                  <div class="admin-role">超级管理员</div>
                </div>
                <el-icon>
                  <ArrowDown />
                </el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-icon>
                      <User />
                    </el-icon>个人中心
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-icon>
                      <Setting />
                    </el-icon>账户设置
                  </el-dropdown-item>
                  <el-dropdown-item divided>
                    <el-icon>
                      <SwitchButton />
                    </el-icon>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>

    <div class="content-wrapper">
      <!-- 侧边栏 -->
      <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
        <div class="collapse-btn" @click="toggleCollapse">
          <el-icon v-if="isCollapsed">
            <Expand />
          </el-icon>
          <el-icon v-else>
            <Fold />
          </el-icon>
        </div>

        <el-scrollbar class="sidebar-scroll">
          <el-menu :default-active="activeMenu" :collapse="isCollapsed" :collapse-transition="false" class="admin-menu"
            background-color="#1a2f54" text-color="#eaeaea" active-text-color="#409EFF">
            <!-- 用户管理 -->
            <el-sub-menu index="user">
              <template #title>
                <el-icon>
                  <UserFilled />
                </el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/user-management/list" @click="handleMenuClick('user-management/list')">
                <el-icon>
                  <List />
                </el-icon>
                <span>用户列表</span>
              </el-menu-item>
              <el-menu-item index="/user-management/learning-progress"
                @click="handleMenuClick('user-management/learning-progress')">
                <el-icon>
                  <TrendCharts />
                </el-icon>
                <span>学习进度</span>
              </el-menu-item>
              <el-menu-item index="/user-management/exam-record"
                @click="handleMenuClick('user-management/exam-record')">
                <el-icon>
                  <Notebook />
                </el-icon>
                <span>考试记录</span>
              </el-menu-item>
              <el-menu-item index="/user-management/wrong-questions"
                @click="handleMenuClick('user-management/wrong-questions')">
                <el-icon>
                  <Warning />
                </el-icon>
                <span>错题分析</span>
              </el-menu-item>
              <el-menu-item index="/user-management/learning-plan"
                @click="handleMenuClick('user-management/learning-plan')">
                <el-icon>
                  <Calendar />
                </el-icon>
                <span>学习计划</span>
              </el-menu-item>
              <el-menu-item index="/user-management/question-collection"
                @click="handleMenuClick('user-management/question-collection')">
                <el-icon>
                  <StarFilled />
                </el-icon> <!-- 使用星星图标表示收藏 -->
                <span>题目收藏</span>
              </el-menu-item>
            </el-sub-menu>

            <!-- 数据统计 -->
            <el-sub-menu index="stats">
              <template #title>
                <el-icon>
                  <Histogram />
                </el-icon>
                <span>数据统计</span>
              </template>
              <el-menu-item index="/statistics/overview" @click="handleMenuClick('statistics/overview')">
                <el-icon>
                  <PieChart />
                </el-icon>
                <span>数据概览</span>
              </el-menu-item>
              <el-menu-item index="/statistics/community" @click="handleMenuClick('statistics/community')">
                <el-icon>
                  <DataAnalysis />
                </el-icon>
                <span>社区分析</span>
              </el-menu-item>
              <el-menu-item index="/statistics/reports" @click="handleMenuClick('statistics/reports')">
                <el-icon>
                  <DocumentCopy />
                </el-icon>
                <span>考试分析</span>
              </el-menu-item>
            </el-sub-menu>

            <!-- 题库管理 -->
            <el-sub-menu index="question">
              <template #title>
                <el-icon>
                  <Collection />
                </el-icon>
                <span>题库管理</span>
              </template>
              <el-menu-item index="/question-management/list" @click="handleMenuClick('question-management/list')">
                <el-icon>
                  <List />
                </el-icon>
                <span>题库列表</span>
              </el-menu-item>
              <el-menu-item index="/question-management/rolls" @click="handleMenuClick('question-management/rolls')">
                <el-icon>
                  <Files />
                </el-icon>
                <span>套卷管理</span>
              </el-menu-item>
            </el-sub-menu>

            <!-- 其他菜单项 -->
            <el-menu-item index="/feedback" @click="handleMenuClick('feedback')">
              <el-icon>
                <ChatDotRound />
              </el-icon>
              <template #title>反馈处理</template>
            </el-menu-item>

            <el-menu-item index="/post-management" @click="handleMenuClick('post-management')">
              <el-icon>
                <Document />
              </el-icon>
              <template #title>帖子管理</template>
            </el-menu-item>
            <el-menu-item index="/login-log" @click="handleMenuClick('login-log')">
              <el-icon>
                <Document />
              </el-icon>
              <template #title>登录日志</template>
            </el-menu-item>
            <el-menu-item index="/system-settings" @click="handleMenuClick('system-settings')">
              <el-icon>
                <Setting />
              </el-icon>
              <template #title>系统设置</template>
            </el-menu-item>
          </el-menu>
        </el-scrollbar>

        <div class="sidebar-footer" v-if="!isCollapsed">
          <div class="system-status">
            <el-icon :style="{ color: systemHealth ? '#67C23A' : '#F56C6C' }">
              <CircleCheckFilled v-if="systemHealth" />
              <WarningFilled v-else />
            </el-icon>
            <span>系统 {{ systemHealth ? '正常' : '异常' }}</span>
          </div>
          <div class="current-time">{{ currentTime }}</div>
        </div>
      </div>

      <!-- 主内容区 -->
      <div class="main-content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from '@/store'
import {
  // 其他图标...
  StarFilled
} from '@element-plus/icons-vue'
import {
  User,
  UserFilled,
  List,
  TrendCharts,
  Notebook,
  Warning,
  Calendar,
  Histogram,
  PieChart,
  DataAnalysis,
  DocumentCopy,
  Collection,
  ChatDotRound,
  Setting,
  Files,
  Document,
  FullScreen,
  Sunny,
  Moon,
  ArrowDown,
  Expand,
  Fold,
  Search,
  CircleCheckFilled,
  WarningFilled,
  SwitchButton
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const store = useStore()

// 状态定义
const isCollapsed = ref(false)
const darkMode = ref(false)
const systemHealth = ref(true)
const currentTime = ref('')

// 计算属性获取Logo
const logoUrl = computed(() => {
  return store.systemLogo || new URL('@/assets/logo.png', import.meta.url).href
})

// 计算属性获取头像
const avatarUrl = computed(() => {
  return store.adminAvatar || new URL('@/assets/admin-avatar.png', import.meta.url).href
})

// 计算当前激活菜单
const activeMenu = computed(() => {
  return route.path
})

// 初始化时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 处理菜单点击
const handleMenuClick = (path) => {
  const fullPath = `/${path}`
  router.push({ path: fullPath })
}

// 切换侧边栏折叠
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}

// 切换暗色模式
const toggleDarkMode = () => {
  darkMode.value = !darkMode.value
  document.documentElement.classList.toggle('dark', darkMode.value)
}

// 切换全屏
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}

// 初始化
onMounted(() => {
  // 初始化时间
  updateTime()
  const timer = setInterval(updateTime, 1000)

  // 清理定时器
  onBeforeUnmount(() => {
    clearInterval(timer)
  })
})
</script>

<style scoped lang="scss">
.admin-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background-color: #f0f2f5;
}

.admin-header {
  background: linear-gradient(135deg, #1a2f54 0%, #0c1a2f 100%);
  color: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 24px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo-img {
  height: 36px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.system-name {
  font-size: 22px;
  font-weight: 600;
  background: linear-gradient(90deg, #ffffff 0%, #a0cfff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.control-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
  background: rgba(255, 255, 255, 0.1);
  color: white;

  &:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
  }

  .el-icon {
    font-size: 18px;
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 20px;
  transition: all 0.3s;
  background: rgba(255, 255, 255, 0.1);

  &:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

.user-details {
  display: flex;
  flex-direction: column;

  .admin-name {
    font-size: 14px;
    font-weight: 500;
  }

  .admin-role {
    font-size: 12px;
    opacity: 0.8;
  }
}

.content-wrapper {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: 220px;
  background: linear-gradient(to bottom, #1a2f54 0%, #0c1a2f 100%);
  color: #eaeaea;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: width 0.3s;
  position: relative;
  z-index: 9;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);

  &.collapsed {
    width: 64px;
  }
}

.collapse-btn {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  background: rgba(0, 0, 0, 0.2);
  transition: all 0.3s;

  &:hover {
    background: rgba(0, 0, 0, 0.3);
  }

  .el-icon {
    font-size: 20px;
  }
}

.sidebar-scroll {
  flex: 1;
  overflow: hidden;
}

.admin-menu {
  border-right: none;

  :deep(.el-sub-menu__title),
  :deep(.el-menu-item) {
    height: 48px;
    line-height: 48px;
    transition: all 0.3s;

    &:hover {
      background: rgba(255, 255, 255, 0.1) !important;
    }
  }

  :deep(.el-menu-item) {
    &.is-active {
      background: rgba(64, 158, 255, 0.2) !important;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 4px;
        background: #409EFF;
      }
    }
  }

  :deep(.el-icon) {
    font-size: 18px;
    margin-right: 8px;
  }
}

.sidebar-footer {
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);

  .system-status {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

.main-content {
  flex: 1;
  padding: 20px;
  background: #f5f7fa;
  box-sizing: border-box;
  overflow-y: auto;
  position: relative;
}

/* 暗色模式 */
.dark {
  .admin-container {
    background-color: rgba(51, 51, 122, 0.8); // 调整为深蓝色透明一点
  }

  .main-content {
    background: rgba(0, 0, 50, 0.9); // 调整为深蓝色透明一点
  }
}
</style>